const path = require("path");
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");

console.log(`-------当前环境：${process.env.NODE_ENV}-------`);
const time=new Date().getTime()
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  outputDir: "dist",
  assetsDir: "static", //静态资源目录(js,css,img,fonts)

  lintOnSave: false,
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)

  configureWebpack: {
    // 警告 webpack 的性能提示
    performance: {
      hints: "warning",
      // 入口起点的最大体积
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith(".js");
      },
    },
  },

  chainWebpack: (config) => {
    if (["production", "test", "pre"].includes(process.env.NODE_ENV)) {
      // webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete
      config.optimization.delete("splitChunks");
      // 删除prefetch
      config.plugins.delete("prefetch");
      // 删除console
      config.optimization.minimizer("terser").tap((options) => {
        options[0].terserOptions.compress.drop_console = false;
        return options;
      });
      // config.plugin('ignore').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) //忽略/moment/locale下的所有文件

      // 代码分割
      config.optimization.splitChunks({
        chunks: "all", // 将对什么类型的代码进行分割，三种值：all: 全部 ｜ async: 异步，按需加载的代码 ｜ initial: 入口代码块
        minSize: 50000, // 字节 引入的文件大于30kb才进行分割
        minChunks: 1, // 模块至少使用次数
        maxInitialRequests: 10, // 首页加载的时候引入的文件最多5个
        cacheGroups: {
          // 定义 libs 缓存组，分割从 node_modules 中引入的代码
          // vendors: {
          //   name: 'chunk-vendors', // 分割成的文件名
          //   test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中模块
          //   priority: -20 // 优先级，当模块同时命中多个缓存组的规则时，分配到优先级高的缓存组
          // },
          // default: {   //所有代码分割快都符合默认值，此时判断priority优先级
          //   minChunks: 2,
          //   priority: -20,
          //   reuseExistingChunk: true   // 允许在模块完全匹配时重用现有的块，而不是创建新的块。
          // },
          vant: {
            name: "chunk-vant",
            priority: 20, // 优先级 20，命中 vant 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?vant(.*)/, // 匹配 vant 代码
          },
          moment: {
            name: "chunk-moment",
            priority: 20, // 优先级 20，命中 moment 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?moment(.*)/, // 匹配 moment 代码
          },
          vue: {
            name: "chunk-vue",
            priority: 20, // 优先级 20，命中 lodash 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?vue(.*)/, // 匹配 lodash 代码
          },
          // qs: {
          //   name: "chunk-qs",
          //   priority: 20, // 优先级 20，命中 lodash 代码时，优先分割到此组里
          //   test: /[\\/]node_modules[\\/]_?qs(.*)/, // 匹配 lodash 代码
          // },
          swiper: {
            name: "chunk-swiper",
            priority: 20, // 优先级 20，命中 lodash 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?swiper(.*)/, // 匹配 lodash 代码
          },
          md5: {
            name: "chunk-md5",
            priority: 20, // 优先级 20，命中 lodash 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?js-md5(.*)/, // 匹配 lodash 代码
          },
          echarts: {
            name: "chunk-echarts",
            priority: 20, // 优先级 20，命中 lodash 代码时，优先分割到此组里
            test: /[\\/]node_modules[\\/]_?echarts(.*)/, // 匹配 lodash 代码
          },
        },
      });

      config.output
        .filename(`js${time}/[name].[contenthash:8].${time}.js?v=${time}`)
        .chunkFilename(`js${time}/[name].[contenthash:8].${time}.js?v=${time}`);

      // 修改js，js chunk文件输出目录
      // config.output.filename('js/[name].[hash:8].js').chunkFilename('js/[name].[contenthash:8].chunk.js')
    }
    if (
      process.env.NODE_ENV === "production" ||
      process.env.NODE_ENV === "pre"
    ) {
      // 对超过10kb的文件gzip压缩
      config.plugin("compressionPlugin").use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/, // 匹配文件名
          threshold: 10240,
        })
      );

      // 打包日志
      // config.plugin('webpack-bundle-analyzer').use(WebpackBundleAnalyzer.BundleAnalyzerPlugin)
    }
  },

  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname), "src/styles/variables.less"],
    },
  },

  devServer: {
    open: process.platform === "dev",
    host: "0.0.0.0",
    port: 8285,
    https: false,
    hotOnly: false,

    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理

    // proxy: {
    //   '/api': {
    //     target: "http://test-api.meta2032.org",
    //     changeOrigin: true,
    //     secure: false,
    //     pathRewrite: {
    //       "^/api": ""
    //     }
    //   },
    //
    //   // '/foo': {
    //   //   target: '<other_url>'
    //   // }
    // }, // string | Object
    // before: app => {}
    // https: true
  },
  // pwa: {
  //   iconPaths: {
  //     favicon32: 'logo.png',
  //     favicon16: 'logo.png',
  //     appleTouchIcon: 'logo.png',
  //     maskIcon: 'logo.png',
  //     msTileImage: 'logo.png'
  //   }
  // },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 58,
            propList: ["*"],
          }),
        ],
      },
    },
  },
};
